<template>
  <div class="common-header">
    <!-- 左侧 -->
    <!-- 表单筛选区域 -->
    <el-row type="flex" justify="space-between">
      <el-form v-if="$slots.left" class="form">
        <!-- 此处自定义放置表单域 -->
        <slot name="left" />
        <el-form-item inline>
          <el-button icon="el-icon-search" type="primary" plain size="small" @click="searchBtn">搜索</el-button>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-refresh" plain size="small" @click="resetBtn">重置</el-button>
        </el-form-item>
      </el-form>
      <!-- 右侧 -->
      <!-- 操作区域 -->
      <div class="right">
        <el-button
          type="primary"
          plain
          size="small"
          icon="el-icon-plus"
          @click.native="clickBtn"
        >
          <slot name="right" />
        </el-button>
      </div>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'CommonHeader',

  data() {
    return {

    }
  },

  mounted() {

  },

  methods: {
    searchBtn() {
      this.$emit('search')
    },
    resetBtn() {
      this.$emit('reset')
    },
    clickBtn() {
      this.$emit('click')
    }
  }
}
</script>

<style lang="scss" scoped>
.common-header{
  .form{
    display: flex;
    justify-content: space-evenly;
    ::v-deep .el-input,
    ::v-deep .el-select{
      margin-right: 10px;
      width: 200px;
    }
     ::v-deep .el-button{
      margin-right: 10px;
      height: 32px;
     }
.right{
  width: 97px;
  height: 32px;
::v-deep .el-button{
  span{
    width: 97px;
    height: 32px;
  }
}
}
}
}
</style>
